<!DOCTYPE html>
<html lang="zxx" class="js">

<head>
    <base href="../">
    <meta charset="utf-8">
    <meta name="author" content="Softnio">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
        content="A powerful and conceptual apps base dashboard template that especially build for developers and programmers.">
    <!-- Fav Icon  -->
    <link rel="shortcut icon" href="./images/favicon.png">
    <!-- Page Title  -->
    <title>微生物信息一览</title>
    <!-- StyleSheets  -->
    <link rel="stylesheet" href="./assets/css/dashlite.css?ver=2.2.0">
    <link id="skin-default" rel="stylesheet" href="./assets/css/theme.css?ver=2.2.0">
    <style>
        .limit_size {
            width: 9vw;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            
        }

        @media screen and (min-width: 1200px) and (max-width: 1324px) {
            .limit_size {
                width: 7.2vw;
            }
        }
    </style>
</head>

<body class="nk-body bg-lighter npc-general has-sidebar " ng-app="alienPlants" ng-controller="specController"  ng-init="initAllSpec(3)">
    <div class="nk-app-root">
        <!-- main @s -->
        <div class="nk-main ">
            <!-- sidebar @s -->
            <div class="nk-sidebar nk-sidebar-fixed is-dark " data-content="sidebarMenu" id="sliderModel">        
            </div>
            <!-- sidebar @e -->
            <!-- wrap @s -->
            <div class="nk-wrap ">
                <!-- main header @s -->
                <div class="nk-header nk-header-fixed is-light" id="headerSilder">
                </div>
                <!-- main header @e -->
                <!-- content @s -->
                <div class="nk-content ">
                    <div class="container-fluid">
                        <div class="nk-content-inner">
                            <div class="nk-content-body">
                                <div class="nk-block-head nk-block-head-sm">
                                    <!-- <div class="nk-block-head-sub mb-4"><a class="back-to" href="html/index.html"><em
                                                class="icon ni ni-arrow-left"></em><span>首页</span></a></div> -->
                                    <div class="nk-block-between">
                                        <div class="nk-block-head-content">
                                            <h3 class="nk-block-title page-title">微生物物种信息</h3>
                                            <div class="nk-block-des text-soft">
                                                <p>总共有{{data.total}}个微生物.</p>
                                            </div>
                                        </div><!-- .nk-block-head-content -->
                                        <div class="nk-block-head-content">
                                            <div class="toggle-wrap nk-block-tools-toggle">
                                                <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1"
                                                    data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                                                <div class="toggle-expand-content" data-content="pageMenu">
                                                    <ul class="nk-block-tools g-3">
                                                            <div class="drodown">
                                                                <a href="#"
                                                                    class="dropdown-toggle btn btn-icon btn-primary"
                                                                    data-toggle="dropdown"><em
                                                                        class="icon ni ni-plus"></em></a>
                                                                <div class="dropdown-menu dropdown-menu-right">
                                                                    <ul class="link-list-opt no-bdr">
                                                                        <li><a href="html/microbe-add.html"><span>添加微生物</span></a></li>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div><!-- .toggle-wrap -->
                                        </div><!-- .nk-block-head-content -->
                                    </div><!-- .nk-block-between -->
                                </div><!-- .nk-block-head -->
                                <div class="nk-block">
                                    <div class="card card-bordered card-stretch">
                                        <div class="card-inner-group">
                                            <div class="card-inner position-relative card-tools-toggle">
                                                <div class="card-title-group">
                                                    
                                                    <div class="card-tools mr-n1">
                                                        <ul class="btn-toolbar gx-1">
                                                            <li>
                                                                <a href="#"
                                                                    class="btn btn-icon search-toggle toggle-search"
                                                                    data-target="search"><em
                                                                        class="icon ni ni-search"></em></a>
                                                            </li><!-- li -->
                                                            <li>
                                                                <div class="toggle-wrap">
                                                                    <a href="#" class="btn btn-icon btn-trigger toggle"
                                                                        data-target="cardTools"><em
                                                                            class="icon ni ni-menu-right"></em></a>
                                                                    <div class="toggle-content"
                                                                        data-content="cardTools">
                                                                                <a href="#"
                                                                                    class="btn btn-icon btn-trigger toggle"
                                                                                    data-target="cardTools"><em
                                                                                        class="icon ni ni-arrow-left"></em></a>
                                                                    </div><!-- .toggle-content -->
                                                                </div><!-- .toggle-wrap -->
                                                            </li><!-- li -->
                                                        </ul><!-- .btn-toolbar -->
                                                    </div><!-- .card-tools -->
                                                </div><!-- .card-title-group -->
                                                <!-- <div class="card-search search-wrap" data-search="search">
                                                    <div class="card-body">
                                                        <div class="search-content">
                                                            <a href="#" class="search-back btn btn-icon toggle-search"
                                                                data-target="search"><em
                                                                    class="icon ni ni-arrow-left"></em></a>
                                                            <input type="text"
                                                                class="form-control border-transparent form-focus-none "
                                                                placeholder="请输入想查找的物种名称或者别称" ng-keyup="myKeyup($event)" ng-model="name">
                                                            <button class="search-submit btn btn-icon shearchClick" id="shearchClick" ng-click="initSpecByName(name)"><em
                                                                    class="icon ni ni-search"></em></button>
                                                        </div>
                                                    </div>
                                                </div> -->
                                                <div class="card-search search-wrap" data-search="search">
                                                    <div class="card-body row">
                                                        <div class="w-250px mr-3 ml-5">
                                                            <input type="text" class="form-control" id="default-01" placeholder="请输入想查找的物种名称或者别称" ng-keyup="myKeyup($event)" ng-model="name">
                                                        </div>
                                                        <div>
                                                            <button  type="submit" class="btn btn-primary shearchClick" id="shearchClick" ng-click="initSpecByName(name,3)">查找</button>
                                                        </div>
                                                        
                                                    </div>
                                                </div><!-- .card-search -->
                                            </div><!-- .card-inner -->
                                            <div class="card-inner p-0">
                                                <div class="nk-tb-list nk-tb-ulist is-compact">
                                                    <div class="nk-tb-item nk-tb-head">
                                                        <div class="nk-tb-col tb-col-sm"><span
                                                            class="sub-text">specyId</span></div>
                                                        <div class="nk-tb-col">
                                                            <span class="sub-text">specyName</span></div>
                                                        <div class="nk-tb-col tb-col-sm"><span
                                                                class="sub-text">anotherName</span></div>
                                                        <div class="nk-tb-col tb-col-sm"><span
                                                                class="sub-text">latinName</span></div>
                                                        <div class="nk-tb-col tb-col-sm"><span
                                                                class="sub-text">specyType</span></div>
                                                        <div class="nk-tb-col tb-col-md"><span
                                                                class="sub-text">detailType</span></div>
                                                        <div class="nk-tb-col tb-col-md"><span
                                                                class="sub-text">sourceArea</span></div>
                                                        <div class="nk-tb-col tb-col-md"><span
                                                                class="sub-text">specyFamily</span></div>
                                                        <div class="nk-tb-col tb-col-lg"><span
                                                                class="sub-text">specyGenus</span></div>
                                                        <div class="nk-tb-col nk-tb-col-tools text-right">
                                                            
                                                        </div>
                                                    </div><!-- .nk-tb-item -->
                                                    <div class="nk-tb-item" ng-repeat="s in data.list">
                                                        
                                                        <div class="nk-tb-col tb-col-sm">
                                                            <span class="tb-lead">{{s.specyId}}</span>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-sm">
                                                            <div class="row">
                                                                <span class="limit_size">{{s.specyName}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-sm">
                                                            <div class="row">
                                                                <span ng-if="!s.anotherName" class="pl-4">暂无</span>
                                                                <span class="limit_size">{{s.anotherName}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-sm">
                                                            <div class="row">
                                                                <span ng-if="!s.latinName">暂无</span>
                                                                <span class="limit_size">{{s.latinName}}</span>
                                                            </div>
                                                        </div>
                                                        <div class="nk-tb-col  tb-col-sm limit_size">
                                                            <ul class="list-status">
                                                                <li><em class="icon text-success ni ni-check-circle"></em>
                                                                    <span ng-if="s.specyType==1">植物</span>
                                                                    <span ng-if="s.specyType==2">动物</span>
                                                                    <span ng-if="s.specyType==3">微生物</span>
                                                                    <!-- <span>{{s.specyType}}</span> -->
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-md limit_size">
                                                            <ul class="list-status">
                                                                <li><em class="icon text-success ni ni-sign-ltc"></em>
                                                                    <span ng-if="!s.detailType">暂无</span>
                                                                    <span ng-if="s.detailType==1">细菌</span>
                                                                    <span ng-if="s.detailType==2">真菌</span>
                                                                    <span ng-if="s.detailType==3">病毒</span>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-md">
                                                            <ul class="list-status">
                                                                <li>
                                                                    <div class="row pl-3">
                                                                        <span ng-if="!s.sourceArea">暂无</span>
                                                                        <span class="limit_size">{{s.sourceArea}}</span>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-md">
                                                            <ul class="list-status">
                                                                <li>
                                                                    <div class="row pl-3">
                                                                        <span ng-if="!s.specyFamily">暂无</span>
                                                                        <span>{{s.specyFamily}}</span>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="nk-tb-col tb-col-lg">
                                                            <ul class="list-status">
                                                                <li>
                                                                    <div class="row  pl-3">
                                                                        <span ng-if="!s.specyGenus">暂无</span>
                                                                        <span class="limit_size">{{s.specyGenus}}</span>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="nk-tb-col nk-tb-col-tools">
                                                            <ul class="nk-tb-actions gx-1">
                                                                <li class="nk-tb-action-hidden"  ng-click=""
                                                                    style="z-index: 999;position: absolute;">
                                                                    <a href="html/microbe-detail.html?sid={{s.specyId}}" class="btn btn-sm btn-icon btn-trigger"
                                                                        data-toggle="tooltip" data-placement="top"
                                                                        title="详情">
                                                                        <em class="icon ni ni-info-i"></em>
                                                                    </a>
                                                                </li>
                                                                <li class="nk-tb-action-hidden">
                                                                    <a href="html/microbe-modify.html?sid={{s.specyId}}" class="btn btn-sm btn-icon btn-trigger"
                                                                        data-toggle="tooltip" data-placement="top"
                                                                        title="编辑">
                                                                        <em class="icon ni ni-edit"></em>
                                                                    </a>
                                                                </li>
                                                                <li class="nk-tb-action-hidden eg-swal-av3">
                                                                    <a href="javascript:void(0)"
                                                                        class="btn btn-sm btn-icon btn-trigger"
                                                                        data-toggle="tooltip" data-placement="top"
                                                                        title="删除" ng-click="delInfo(s.sid)">
                                                                        <em class="icon ni ni-trash"></em>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <div class="drodown">
                                                                        <a href="#"
                                                                            class="btn btn-sm btn-icon btn-trigger"><em
                                                                                class="icon ni ni-more-h"></em></a>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div><!-- .nk-tb-list -->
                                            </div><!-- .card-inner -->
                                            <div class="nk-block-between-md g-3 pl-5 pr-5 pt-3 pb-3">
                                                <div class="g">
                                                    <ul class="pagination justify-content-center justify-content-md-start">
                                                        <li class="page-item"><a class="page-link" ng-click="delPage(3)" style="cursor:pointer;"><<</a></li>
                                                        <li class="page-item"><a class="page-link" href="#">{{data.pageNum}}</a></li>
                                                        <li class="page-item"><a class="page-link" ng-click="addPage(3)" style="cursor:pointer;">>></a></li>
                                                    </ul><!-- .pagination -->
                                                </div>
                                                <div class="g">
                                                    <div class="card-tools ml-4">
                                                        <div class="form-inline flex-nowrap gx-3">
                                                            <div class="form-wrap w-50px">
                                                                <input type="text" class="form-control" required
                                                                                id="default-02" name="num"
                                                                                placeholder="请输入页数,共{{data.pages}}页"
                                                                                ng-model="num">
                                                            </div>
                                                            <div>
                                                                <button class="btn btn-dim btn-outline-light" ng-click="initSpecByPage(num)">跳转</button>
                                                            </div>
                                                        </div><!-- .form-inline -->
                                                    </div><!-- .card-tools -->
                                                </div>
                                            </div><!-- .card-inner -->
                                        </div><!-- .card-inner-group -->
                                    </div><!-- .card -->
                                </div><!-- .nk-block -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- content @e -->
                <!-- footer @s -->
                <div class="nk-footer">
                    <div class="container-fluid">
                        <div class="nk-footer-wrap">
                            <div class="nk-footer-copyright"> &copy; 2020 DashLite. Template by <a
                                    href="http://www.bootstrapmb.com/" target="_blank">Softnio</a>
                            </div>
                            <div class="nk-footer-links">
                                <ul class="nav nav-sm">
                                    <li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- footer @e -->
            </div>
            <!-- wrap @e -->
        </div>
        <!-- main @e -->
    </div>
    <!-- app-root @e -->
    <!-- JavaScript -->
    <script src="./assets/js/bundle.js?ver=2.2.0"></script>
    <script src="./assets/js/scripts.js?ver=2.2.0"></script>
    <script src="./assets/js/example-sweetalert.js"></script>
    <script src="./assets/js/angular/angularjs/angular.min.js"></script>
    <script src="./assets/js/angular/angularjs/angular-route.min.js"></script>
    <script src="./assets/js/angular/base.js"></script>
    <script src="./assets/js/angular/service/specService.js"></script>
    <script src="./assets/js/angular/controller/specController.js"></script>
</body>

</html>